<template>
  <div>
    <el-form :inline="true" :model="formInline" label-width="80px">
      <el-form-item label="分公司">
        <el-select v-model="formInline.limit_branch_id" v-if="isBranch" style="width: 180px" filterable>
          <el-option
            v-for="item in branchList"
            :label="item.branch_Name"
            :value="item.branch_Id">
          </el-option>
        </el-select>
        <el-input v-else v-model="branchName" disabled></el-input>
        <!--<el-input v-model="this.branchName" disabled></el-input>-->
      </el-form-item>
      <!--<el-form-item label="所属部门">-->
        <!--<el-input v-model="this.orgName" disabled></el-input>-->
      <!--</el-form-item>-->
      <el-form-item label="客资类型" required>
        <el-select v-model="formInline.limit_user_type" style="width: 150px" filterable>
          <el-option
            v-for="item in formInline.clientList"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动类型">
        <el-select v-model="formInline.promotion_type" style="width: 120px">
          <el-option label="满减" value="4"></el-option>
          <el-option label="满赠" value="5"></el-option>
          <el-option label="加价购" value="6"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择时间">
        <el-date-picker
          style="width: 200px"
          v-model="formInline.time"
          type="daterange"
          value-format="yyyy-MM-dd"
          @change="timeChange"
          placeholder="选择周期范围">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="formInline.check_status" @change="pageChange" style="width: 120px">
          <el-option label="全部" value="-1"></el-option>
          <el-option label="待审核" value="2"></el-option>
          <el-option label="审核中" value="3"></el-option>
          <el-option label="审核不通过" value="4"></el-option>
          <el-option label="未开始" value="5"></el-option>
          <el-option label="进行中" value="6"></el-option>
          <el-option label="已结束" value="7"></el-option>
          <el-option label="已作废" value="99"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动ID">
        <el-input v-model="formInline.promotion_id" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="活动名称">
        <el-input v-model="formInline.promotion_name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      style="width: 100%"
      v-loading="isLoading"
      :data="tableData"
      @select-all="handleSelectionChange"
      @selection-change="handleChange"
      border>
      <el-table-column
        align="center"
        fixed
        type="selection"
        :selectable="isCheck"
        width="50">
      </el-table-column>
      <el-table-column
        prop="branchName"
        show-overflow-tooltip
        label="分公司"
        align="center"
        width="140">
      </el-table-column>
      <!--<el-table-column-->
        <!--prop="departName"-->
        <!--label="所属部门"-->
        <!--align="center"-->
        <!--width="140">-->
      <!--</el-table-column>-->
      <el-table-column
        prop="customerName"
        label="客资类型"
        align="center"
        width="80">
      </el-table-column>
      <el-table-column
        label="活动类型"
        align="center"
        width="80">
        <template scope="scope">
          <span v-if="scope.row.promotion_type === 4">满减</span>
          <span v-if="scope.row.promotion_type === 5">满赠</span>
          <span v-if="scope.row.promotion_type === 6">加价购</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        label="活动ID"
        align="center"
        width="80">
      </el-table-column>
      <el-table-column
        prop="promotion_name"
        label="活动名称"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="product_count.main_product_count"
        label="商品数"
        align="center"
        width="80">
      </el-table-column>
      <el-table-column
        prop="start_time"
        label="开始时间"
        show-overflow-tooltip
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="end_time"
        label="结束时间"
        show-overflow-tooltip
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="updateUser"
        label="申请人"
        width="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="申请时间"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        label="活动状态"
        prop="state"
        align="center"
        width="120">
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="120">
        <template scope="scope">
          <el-button v-if="" @click="handle(scope.$index, scope.row, $event)" size="small">详情</el-button>
          <el-button v-if="(scope.row.state === '审核中' && scope.row.isCheck === 'true') || (scope.row.state === '待审核' && scope.row.isCheck === 'true')" @click="handle(scope.$index, scope.row, $event)" size="small">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="float: left; margin-top: 10px">
      <el-button type="primary" @click="lotCheck">批量审核</el-button>
    </div>
    <!--分页-->
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="Number(pageData.pageSize)"
      layout="total, prev, pager, next"
      :total="Number(total)"
      style="padding-top:10px;text-align: right;">
    </el-pagination>
    <!--审核弹窗-->
    <el-dialog
      title="审核信息"
      size="tiny"
      :visible.sync="dialogCheck">
      <p></p>
      <span>审核状态：</span>
      <template>
        <el-radio class="radio" v-model="radio" label="1">审核通过</el-radio>
        <el-radio class="radio" v-model="radio" label="2">不通过</el-radio>
      </template>
      <el-input style="margin-top: 20px" v-model="noReason" placeholder="请输入审核意见"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCheck = false">关 闭</el-button>
        <el-button type="primary" @click="makeCheck">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { activity, getInfo } from '../../../../config/proxy.js'
  import { mapState } from 'vuex'
  import mixins from '../../../../components/mixins.vue'
  export default {
    mixins: [mixins],
    data () {
      return {
        formInline: {
          limit_branch_id: '',
          limit_user_type: '',
          promotion_type: '',
          check_status: '',
          clientList: '',
          promotion_id: '',
          promotion_name: '',
          time: '',
          start_time: '',
          end_time: '',
          sortType: 2,
          orderBy: 2
        },
        tableData: [],
        isLoading: false,
        pageData: {
          pageSize: 10,
          page: 1
        },
        total: '',
        all: '',
//      审核弹窗
        row: '',
        dialogCheck: false,
        radio: '1',
        noReason: '',
        button: false
      }
    },
    methods: {
      pageChange () {
        this.pageData.page = 1
      },
      timeChange (val) {
        if (val) {
          this.formInline.start_time = val[0]
          this.formInline.end_time = val[1]
        } else {
          this.formInline.start_time = ''
          this.formInline.end_time = ''
        }
      }, // 时间变化
      matchState (res) {
        if (res) {
          for (var i = 0; i < res.length; i++) {
            if (res[i].status === 1) { res[i].state = '草稿' }
            if (res[i].status === 2) { res[i].state = '待审核' }
            if (res[i].status === 3) { res[i].state = '审核中' }
            if (res[i].status === 4) { res[i].state = '审核不通过' }
            if (res[i].status === 5) { res[i].state = '未开始' }
            if (res[i].status === 6) { res[i].state = '进行中' }
            if (res[i].status === 7) { res[i].state = '已结束' }
            if (res[i].status === 99) { res[i].state = '已作废' }
            const str = res[i].gwId
            if (str.indexOf(this.roleId) !== -1 || str.indexOf(this.orId) !== -1) {
              res[i].isCheck = 'true'
            }
//            if (res[i].gwId === this.roleId || res[i].gwId === this.orId) { res[i].isCheck = 'true' }
          }
        }
      }, // 映射
      refreshChange (val) {
        switch (val) {
          case 4 :
            return 'xinmanjianState'
          case 5:
            return 'xinmanzengState'
          case 6:
            return 'jiajiagouState'
        }
      }, // 映射刷新
      onSubmit () {
        if (this.formInline.promotion_type === '') {
          this.$message({
            showClose: true,
            message: '请先选择活动类型',
            type: 'error'
          })
          return false
        }
        this.isLoading = true
        var _data = Object.assign(this.formInline, this.pageData)
        activity.sphd.list(_data, (res) => {
          console.log(res, '待审核列表')
          if (res.message === 'ok') {
            this.tableData = res.content.list
            this.matchState(this.tableData)
            this.total = res.content.count
            this.isLoading = false
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },      // 查询
      handleCurrentChange (val) {
        this.pageData.page = val
        this.onSubmit()
      },  // 分页
      handle (index, row, event) {
        const handleName = event.target.innerText
        switch (handleName) {
          case '审核':
            this.row = row
            this.button = true
            this.noReason === ''
            this.dialogCheck = true
            break
          case '详情':
            var result = this.checkDetail(Number(row.promotion_type))
            let _data = {
              menu_id: row.id + 1,
              menu_name: '活动详情',
              per_controller: result,
              uid: row
            }
            this.$store.dispatch('addTab', _data)
            break
        }
      }, // 操作
      makeCheck () {
        if (this.radio === '2' && this.noReason === '') {
          this.$message({
            showClose: true,
            message: '请您输入审核意见',
            type: 'warning'
          })
          return false
        }
        var checkArr = []
        if (!this.button) {
          console.log(this.all)
          this.all.forEach((item, index) => {
            const newItem = {
              tid: item.promotion_type,
              aid: item.id,
              gwId: item.gwId.indexOf(this.roleId) !== -1 ? this.roleId : this.orId
            }
            checkArr.push(newItem)
          })
          this.changeName = this.refreshChange(checkArr[0].promotion_type)
        } else {
          const newItem = {
            tid: this.row.promotion_type,
            aid: this.row.id,
            gwId: this.row.gwId.indexOf(this.roleId) !== -1 ? this.roleId : this.orId
          }
          this.changeName = this.refreshChange(this.row.promotion_type)
          checkArr.push(newItem)
        }
        const _data = {
          branchId: this.branchId,
          newBranchId: this.bid,
          opinion: this.noReason,
          result: Number(this.radio),
          userId: this.userId,
          userName: this.userName,
          activityInfo: checkArr,
          flag: 1
        }
        activity.hdsh.yhqhdsh.check(_data, res => {
          this.dialogCheck = false
          if (res.message === 'ok') {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success'
            })
            this.onSubmit()
            this.$store.dispatch(this.changeName, this.$store.state.updateState[this.changeName] + 1)
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },
      checkDetail (type) {
        switch (type) {
          case 4:
            return 'manjian_detail'
          case 5:
            return 'manzeng_detail'
          case 6:
            return 'jiajiagou_detail'
        }
      },
      isCheck (row, index) {
        return (row.state === '待审核' && row.isCheck === 'true') || (row.state === '审核中' && row.isCheck === 'true')
      },
      handleChange (all) {
        this.all = all
      },
      handleSelectionChange (all) {
        this.all = all
      },
      lotCheck () {
        if (this.all.length !== 0) {
          this.dialogCheck = true
        } else {
          this.$message({
            showClose: true,
            message: '请勾选您要批量审核的数据',
            type: 'warning'
          })
        }
      }
    },
    computed: mapState({
      userName: function (state) {
        return state.user.info.user_name
      },
      userId: function (state) {
        return state.user.info.user_id
      },
      orgName: function (state) {
        return state.user.info.parOrgName
      },
      orgId: function (state) {
        return state.user.info.or_org_id
      },
      roleId: function (state) {
        return Number(state.user.info.roleid)
      },
      orId: function (state) {
        return Number(state.user.info.or_id)
      },
      branchName: function (state) {
        return state.user.info.branchId === 1 ? '总公司' : state.user.info.branchName
      },
      branchId: function (state) {
        return state.user.info.branchId
      },
      bid: function (state) {
        return state.user.info.branchOrgId
      }
    }),
    created () {
      this.formInline.limit_branch_id = this.branchId
//      this.formInline.limit_department = this.roleId === '19' ? '' : this.orgId
      this.formInline.limit_department = ''
      this.formInline.newBranchId = this.bid
      getInfo.client({}, (res) => {
        if (res.message === 'ok') {
          this.formInline.clientList = res.content.content
        }
      }) // 客资
    }
  }
</script>
<style>
</style>
